<html>
<head>
    <meta charset="utf-8">
    <title>总公司销售订单详情</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/res/layui/css/layui.css" media="all"/>
    <script type="text/javascript" src="/res/js/jquery-3.4.1.min.js"></script>
    <!--模糊搜索区域-->
    <link rel="stylesheet" href="../../css/oksub.css">
    <style>
        .input-group{
            position: absolute;
            left:-150px;
            top:55px;
        }
        #prePic{
            position: absolute;
            left: 170px;
            top: 0px;
        }
        /*调整返回所有角色高度*/
        .layui-form-checkbox i{
            height: 28px;
        }

    </style>
</head>
<body style="padding-top: 10px">
<div class="ok-body">
    <!--模糊搜索区域-->
    <div class="layui-row">
        <form class="layui-form layui-col-md12 ok-search">
            <input class="layui-input" placeholder="请输入销售明细编号" autocomplete="off" name="marketDetailId">
            <input class="layui-input" placeholder="请输入药品名称" autocomplete="off" name="drugName">
            <input class="layui-input" placeholder="输入开始日期" lay-verify="startTime" autocomplete="off" id="startTime" name="startTime">
            <input class="layui-input" placeholder="输入结束日期" autocomplete="off" id="endTime" name="endTime">
            <div class="layui-form-item"></div>
            <input type="text" name="priceMin" placeholder="￥最小金额" maxlength="20"
                    autocomplete="off" class="layui-input" lay-verify="PriceMin" oninput="value = value.replace(/[^0-9.]/g, '').trim()" onkeyup="clearNoNum(this)" id="priceMin">
            <input type="text" name="priceMax" placeholder="￥最大金额" maxlength="20" id="priceMax"
                   autocomplete="off" class="layui-input" oninput="value = value.replace(/[^0-9.]/g, '').trim()" onkeyup="clearNoNum(this)" onblur="minMoneyNoMaxMoney(this)">
            <input type="text" name="numMin" placeholder="最小数量" maxlength="20" id="numMin" oninput="value=value.replace(/[^\d]/g,'')"
                   autocomplete="off" class="layui-input" lay-verify="numMin" onkeyup="clearNoNums(this)">
            <input type="text" name="numMax" placeholder="最大数量" maxlength="20" id="numMax" oninput="value=value.replace(/[^\d]/g,'')"
                   autocomplete="off" class="layui-input"  onkeyup="clearNoNums(this)" onblur="minNumNoMaxNum(this)">

            <button class="layui-btn" lay-submit="" lay-filter="search">
                <i class="layui-icon layui-icon-search"></i>
            </button>

        </form>
    </div>
    <!--数据表格-->
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

</body>
<script type="text/javascript" src="/res/layui/layui.js" charset="utf-8"></script>
<script type="text/html" id="img">
    <img src="{{d.drugImg}}" alt="图片" id="dd" width="50" height="50" onclick="previewImg(this)"/>
</script>
<script>
    var openindex = null;
    var table = null;
    layui.use(['table','laydate'] , function(){
        table = layui.table ,
            laydate = layui.laydate;
        let form = layui.form;
        let roleTable = table.render({
            method:"get",
            elem: '#test'
            ,url:'/hqMarketdetail/showList'
            // ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: false
            ,title: '用户数据表'
            ,totalRow: true  //开启合计
            ,height: 'full-200', cellMinWidth: 80 //最大化适应
            ,height:600
            ,cols: [[
                {field:'marketdetailId', title:'序号', width:60, type:'numbers',sort: 'true',unresize: true, sort: 'true', totalRowText: '合计'}
                ,{field:'drugName', title:'药品名称', width:150,align:'center'}
                ,{field:'drugImg', title:'药品图片',width:200,align:'center',templet:'#img'}
                ,{field:'marketId', title:'总公司销售ID', width:200,align:'center'}
                ,{field:'num', title:'数量', width:200,align:'center',sort: 'true', totalRow: true}
                ,{field:'price', title:'价格', width:200,align:'center',sort: 'true', totalRow: true}
                ,{field:'subtotal', title:'小计', width:200,align:'center',sort: 'true', totalRow: true,templet:function (d) {
                        return parseFloat(d.subtotal).toFixed(2);
                    }}
                ,{field:'isva', title:'是否有效', width:150,align:'center',templet:function (d) {
                        if (d.isva=="1"){
                            return  `<a class="layui-btn layui-btn-xs layui-btn-normal">有效</a>`;
                        }else {
                            return  '<a class="layui-btn layui-btn-xs layui-btn-danger">无效</a>';
                        }
                    }}
                ,{field:'oper', title:'操作人',align:'center',width:90}
                ,{field:'remark', title:'备注',align:'center',width:200}
                ,{fixed: 'right',field:'optime', title:'操作时间', width:200,align:'center',sort: 'true'}
                // ,{fixed: 'right', title:'操作', toolbar: '#barDemo',align:'center'}
            ]]
            ,page: true
            ,where: {
                marketId:getQueryString("marketId")
            }
        });

        //查询条件
        form.on("submit(search)", function (data) {
            console.info(data);
            roleTable.reload({
                where: data.field,
                page: {curr: 1}
            });
            return false;
        });

        //添加验证规则verify
        form.verify({
            startTime: function (startTime) {
                if(startTime!='' && $("#endTime").val()!=''){
                    let endTime = $("#endTime").val();
                    return new Date(endTime) > new Date(startTime) ? '' : "开始时间不能大于或等于结束时间";
                }else{
                    return "";
                }

            },
            numMin:function (numMin) {
                console.info(numMin);
                console.info($("#numMax").val())
                if((numMin-0)<($("#numMax").val()-0)){
                    return "";
                }else if((numMin!='' && $("#numMax").val()!='') ){
                    let numMax = $("#numMax").val();
                    return numMax > numMin ? '' : "最小数量不能大于最大数量";
                }else{
                    return "";
                }
            },
            PriceMin:function (priceMin) {
                if((priceMin-0)<($("#priceMax").val()-0)){
                    return "";
                }else if((priceMin!='' && $("#priceMax").val()!='') ){
                    let priceMax = $("#priceMax").val();
                    return priceMax > priceMin ? '' : "最小金额不能大于最大金额";
                }else{
                    return "";
                }
            }

        });
        //日期时间选择器
        laydate.render({
            elem: "#startTime",
            theme: 'molv',
            type: "datetime"});
        laydate.render({
            elem: "#endTime",theme: 'molv', type: "datetime"
        });

    });

    //限制数字的输入
    function clearNoNum(obj){
        obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
        if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
            obj.value= parseFloat(obj.value);
        }
        if(obj.value.indexOf(".")==0){//第一个字符不能为.
            obj.value="";
        }
    }

    /**
     * 图片预览
     */
    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        var height = img.height + 50; //获取图片高度
        var width = img.width; //获取图片宽度
        var imgHtml = "<img src='" + obj.src + "' />";
        //弹出层
        layer.open({
            type : 1,
            shade : 0.8,
            offset : 'auto',
            area : [ width + 'px', height + 'px' ],
            shadeClose : true,//点击外围关闭弹窗
            scrollbar : false,//不现实滚动条
            title : "图片预览", //不显示标题
            content : imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel : function() {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            },
            time : 2000
            //2s后自动关闭
        });
    }

    //限制数字的输入
    function clearNoNums(obj){
        obj.value = obj.value.replace(/[^\d]/g,"");
    }
    //限制最大金额不能小于最小金额
    function minMoneyNoMaxMoney(obj){
        var priceMin = $("#priceMin").val()-0;
        var priceMax = $(obj).val()-0;
        if(priceMax < priceMin){
            $(obj).val("");
            $(obj).attr("placeholder","最大总金额不能低于最小总金额");
        }
    }
    //限制最大数量不能低于最小数量
    function minNumNoMaxNum(obj){
        var numMin = $("#numMin").val()-0;
        var numMax = $(obj).val()-0;
        if(numMax < numMin){
            $(obj).val("");
            $(obj).attr("placeholder","最大总数量不能低于最小总数量");
        }
    }
    /**
     得到地址栏的参数
     */
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }



</script>

</html>
